<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>门禁系统</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>
    <style>
        /*设置背景*/
        body{
            background-color: #f6eff5;
        }
        .td_left{
            width: 700px;
            height:20px;
            text-align: right;
            padding-top: 100px;
            margin-bottom: 100px;
        }
        .mj{
            font-size: 25px;
            margin-left:700px;
            margin-top: 30px;
        }
    </style>
    <script>
        //添加正则表达式
        function checkCard() {
            var card = $("#id_card").val();
            var reg = /^\w+$/;
            return reg.test(card);
        }

        $(function () {
            //把卡号发送至后台
            $("#door_form").submit(function () {
                if (checkCard()){
                    $.get("tea/doorControl",$("#door_form").serialize(),function (data) {
                        if (data == null){
                            $("#welcome").html("未开门");
                        }else{
                            $("#welcome").html("已开门，欢迎您");
                            $("#sid").html("学号："+data.sid+"");
                            $("#sname").html("姓名："+data.sname);
                        }
                    });
                }
                return false;
            });

            //卡号输入框的离焦事件
            $("#id_card").blur(function () {
                if (checkCard()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
        })
    </script>
</head>
<body>
    <h2 style="margin-left: 700px">识别到的卡号</h2>
    <form id="door_form">
        <span ><label for="id_card" class="td_left">卡号</label></span>
        <span><input type="text" name="id_card" id="id_card" placeholder="门禁卡唯一id"></span>
        <span><input type="submit" value="确定" style="margin-left: 50px;width: 70px" class="btn btn-info"></span>
    </form>
    <div class="mj" id="welcome"></div>
    <div class="mj" id="sid"></div>
    <div class="mj" id="sname"></div>
    <div style="float: right;margin-right: 50px">
        <a href="tea_main_page.html" class="btn btn-info">返回主界面</a>
    </div>
</body>
</html>